<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Breadcrumbs - Collapsed</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Breadcrumbs - Collapsed</ion-title>
          <ion-buttons slot="end">
            <ion-button id="expandToggleButton" onClick="toggleBreadcrumbCollapse()"> Expand All </ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding">
        <h1>Default</h1>

        <ion-breadcrumbs class="expandWithoutCollapse">
          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
          <ion-breadcrumb> 35 mm </ion-breadcrumb>
        </ion-breadcrumbs>

        <hr />

        <h1>Max Items: 4</h1>

        <ion-breadcrumbs max-items="4" class="expandOnClick">
          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
          <ion-breadcrumb> 35 mm </ion-breadcrumb>
        </ion-breadcrumbs>

        <hr />

        <h1>Max Items: 4; ItemsBeforeCollapse: 0</h1>

        <ion-breadcrumbs max-items="4" items-before-collapse="0" class="expandOnClick">
          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
          <ion-breadcrumb> 35 mm </ion-breadcrumb>
        </ion-breadcrumbs>

        <hr />

        <h1>Max Items: 4; ItemsBeforeCollapse: 2</h1>

        <ion-breadcrumbs max-items="4" items-before-collapse="2" class="expandOnClick">
          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
          <ion-breadcrumb> 35 mm </ion-breadcrumb>
        </ion-breadcrumbs>

        <hr />

        <h1>Max Items: 4; ItemsAfterCollapse: 0</h1>

        <ion-breadcrumbs max-items="4" items-after-collapse="0" class="expandOnClick">
          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
          <ion-breadcrumb> 35 mm </ion-breadcrumb>
        </ion-breadcrumbs>

        <hr />

        <h1>Max Items: 4; ItemsAfterCollapse: 3</h1>

        <ion-breadcrumbs max-items="4" items-after-collapse="3" class="expandOnClick">
          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
          <ion-breadcrumb> 35 mm </ion-breadcrumb>
        </ion-breadcrumbs>

        <hr />

        <h1>Max Items: 4; ItemsBeforeCollapse: 2; ItemsAfterCollapse: 2</h1>

        <ion-breadcrumbs max-items="4" items-before-collapse="2" items-after-collapse="2" class="expandOnClick">
          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
          <ion-breadcrumb> 35 mm </ion-breadcrumb>
        </ion-breadcrumbs>

        <hr />

        <h1>
          Max Items: 4; ItemsBeforeCollapse: 0; ItemsAfterCollapse: 4
          <ion-button size="small" fill="clear" onClick="changeActive()">Set Active</ion-button>
        </h1>

        <ion-breadcrumbs
          id="custom-active"
          max-items="4"
          items-before-collapse="0"
          items-after-collapse="4"
          class="expandOnClick"
        >
          <ion-breadcrumb href="#">
            Home
            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
          </ion-breadcrumb>
          <ion-breadcrumb href="#electronics">
            Electronics
            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
          </ion-breadcrumb>
          <ion-breadcrumb href="#photography">
            Photography
            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
          </ion-breadcrumb>
          <ion-breadcrumb href="#cameras">
            Cameras
            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
          </ion-breadcrumb>
          <ion-breadcrumb href="#film" active>
            Film
            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
          </ion-breadcrumb>
          <ion-breadcrumb>
            35 mm
            <ion-icon slot="separator" name="arrow-forward"></ion-icon>
          </ion-breadcrumb>
        </ion-breadcrumbs>

        <hr />

        <h1>Max Items: 4; ItemsBeforeCollapse: 3; ItemsAfterCollapse: 2</h1>

        <ion-breadcrumbs max-items="4" items-before-collapse="3" items-after-collapse="2" class="expandOnClick">
          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
          <ion-breadcrumb> 35 mm </ion-breadcrumb>
        </ion-breadcrumbs>

        <hr />

        <h1>Max Items: 4; ItemsBeforeCollapse: 4; ItemsAfterCollapse: 4</h1>

        <ion-breadcrumbs max-items="4" items-before-collapse="4" items-after-collapse="4" class="expandOnClick">
          <ion-breadcrumb href="#"> Home </ion-breadcrumb>
          <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
          <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
          <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
          <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
          <ion-breadcrumb> 35 mm </ion-breadcrumb>
        </ion-breadcrumbs>

        <hr />
      </ion-content>
    </ion-app>

    <script>
      let collapsed = true;
      const expandToggleButton = document.querySelector('#expandToggleButton');

      const expandOnClickBreadcrumbs = document.querySelectorAll('.expandOnClick');

      for (const breadcrumbs of expandOnClickBreadcrumbs) {
        breadcrumbs.addEventListener('ionCollapsedClick', () => expandBreadcrumbs(breadcrumbs));
      }

      function expandBreadcrumbs(breadcrumbs) {
        console.log('expand breadcrumbs');
        breadcrumbs.maxItems = undefined;
      }

      function expandAllBreadcrumbs() {
        console.log('expand all breadcrumbs');
        for (const breadcrumbs of expandOnClickBreadcrumbs) {
          breadcrumbs.maxItems = undefined;
        }
      }

      function collapseAllBreadcrumbs() {
        console.log('collapse all breadcrumbs');
        for (const breadcrumbs of expandOnClickBreadcrumbs) {
          breadcrumbs.maxItems = 4;
        }
      }

      function toggleBreadcrumbCollapse() {
        if (collapsed) {
          expandAllBreadcrumbs();
          expandToggleButton.innerHTML = 'Collapse All';
          collapsed = false;
        } else {
          collapseAllBreadcrumbs();
          expandToggleButton.innerHTML = 'Expand All';
          collapsed = true;
        }
      }

      const expandWithoutCollapseBreadcrumbs = document.querySelector('.expandWithoutCollapse');
      expandWithoutCollapseBreadcrumbs.addEventListener('ionCollapsedClick', () => expandBreadcrumbs(breadcrumbs));

      function changeActive() {
        const breadcrumbs = Array.from(document.querySelectorAll('#custom-active ion-breadcrumb'));
        const activeIndex = breadcrumbs.findIndex((breadcrumb) => breadcrumb.active);

        switch (activeIndex) {
          case 4:
            breadcrumbs[4].active = false;
            breadcrumbs[2].active = true;
            break;
          case 2:
            breadcrumbs[2].active = false;
            breadcrumbs[1].active = true;
            break;
          case 1:
            breadcrumbs[1].active = false;
            breadcrumbs[4].active = true;
            break;
        }
      }
    </script>

    <style>
      h1 {
        display: flex;
        align-items: center;
        justify-content: space-between;

        font-size: 12px;
        font-weight: normal;

        color: #a1a7b0;

        margin-top: 10px;
        margin-left: 5px;
      }

      hr {
        background: #eff1f3;

        margin-top: 18px;
        margin-bottom: 25px;
      }

      ion-content ion-breadcrumbs {
        padding: 3px 5px;
      }
    </style>
  </body>
</html>
